<template>
    <div>
      <div class="search">
        <input type="text" v-model="keyword" placeholder="请输入查询的城市">
      </div>
      <div class="ddd" v-show="keyword" ref="wrappertwo">
          <ul>
            <li v-for="(item,index) of res" :key="index">{{item}}</li>
            <li v-show="!res.length">没有找到</li>
          </ul>
      </div>
      <div  class="detail" ref="wrapper">

        <div>
          <div class="location">您的位置</div>
          <div class="mianL">
            <input type="button" :value="this.$store.state.city">
          </div>
          <div class="location">热门城市</div>
          <div class="mianL">
            <input type="button" :value="item.name" v-for="item of hotCities" :key="item.id" @click="changeCity">
          </div>
          <div v-for="(item,key) of cityList" :key="key" :ref="key">
            <div class="location" >{{key}}</div>
            <div>
              <ul>
                <li v-for="city of item" :key="city.id" @click="change">{{city.name}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import Bscroll from 'better-scroll'
  export default {
      name: "citySearch",
      props:{
        hotCities:Array,
        cityList:Object,
        letter:String
      },
      data(){
        return{
          keyword:'',
          timer:null,
          res:[]
        }
      },
      methods:{
        showList(){
          if(this.keyword !=''){
            return true
          }
          else {
            return false
          }
        },
        changeCity(e){
          this.$store.dispatch('changeCity',(e.target.defaultValue));
        },
        change(e){
          this.$store.dispatch('changeCity',(e.target.innerText));
        }
      },
      mounted: function () {
        this.scroll = new Bscroll(this.$refs.wrapper)
        this.scrolltwo = new Bscroll(this.$refs.wrappertwo)
      },
      watch:{
        letter (){
          if(this.letter){
            let element=this.$refs[this.letter][0];
            this.scroll.scrollToElement(element)
          }
        },
        keyword (){
          if(this.timer){
            clearTimeout(this.timer)
          }
          if(!this.keyword){
            this.res=[]
          }
          this.timer=setTimeout(()=>{
            const result=[];
            if(this.keyword){
              for(let i in this.cityList ){
                this.cityList[i].forEach(value=>{
                  if(value.spell.indexOf(this.keyword)> -1 || value.name.indexOf(this.keyword) > -1 ){
                    result.push(value.name)
                  }
                })
              }
            }

            this.res=result
          },100)
        }
      }
  }
</script>

<style scoped lang="stylus">
  @import "~commonStyle/comment.styl"

  .search
    width 100%
    background-color $bgColor
    text-align center
    input
      width 95%
      font-size .35rem
      color #555555
      text-indent .2rem
      border:.01rem solid #eeeeee
      margin 0 0 .1rem 0
      text-align center
      border-radius .05rem
  .ddd
    background-color #ffffff
    position absolute
    top 1.48rem
    z-index 1
    left 0
    right 0
    bottom 0
    overflow hidden
  .detail
    position absolute
    top 1.5rem
    right 0
    left:  0
    bottom 0
    overflow hidden
    width 100%
    .location
      width 100%
      background-color #eeeeee
      padding .1rem 0 .1rem  .3rem
    .mianL
      padding .2rem .3rem;
      width 100%
      input
        width 20%
        background-color #ffffff
        border 1px solid $bgColor
        color $bgColor
        margin-top .1rem
    li
      line-height .43rem
      padding-left .2rem
      width 90%
      border-bottom  1px solid #eeeeee

</style>
